
<template>
  <view class="container">
    <!-- 标题区域 -->
    <view class="header" :style="{ backgroundColor: '#FF6B6B' }">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont icon-back">←</text>
      </view>
      <text class="title">政治题库</text>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
    </view>

    <!-- 试卷列表区域 -->
    <view v-else>
      <view v-if="examList.length > 0" class="exam-list">
        <view 
          v-for="(item, index) in examList" 
          :key="index" 
          class="exam-item"
          @tap="navigateToExamDetail(item.id)"
        >
          <view class="exam-info">
            <text class="exam-title">{{ item.title }}</text>
            <text class="exam-desc">{{ item.description }}</text>
            <view class="exam-meta">
              <text class="meta-item">总分: {{ item.totalScore }}分</text>
              <text class="meta-item">及格分: {{ item.passingScore }}分</text>
              <text class="meta-item">时长: {{ item.duration }}分钟</text>
            </view>
          </view>
          <view class="exam-actions">
            <view class="difficulty">
              <text class="difficulty-label">难度:</text>
              <view class="stars">
                <text 
                  v-for="n in 5" 
                  :key="n" 
                  class="star" 
                  :class="{ active: n <= item.difficultyLevel }"
                >★</text>
              </view>
            </view>
            <view :class="['status-tag', getStatusClass(item.status)]">{{ getStatusText(item.status) }}</view>
          </view>
        </view>
      </view>
      <view v-else class="empty-state">
        <image src="/static/icons/empty.png" mode="aspectFit" class="empty-icon"></image>
        <text class="empty-text">暂无试卷，请稍后再来~</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { request } from '@/utils/request'

// 组件状态
const loading = ref(true)
const examList = ref([])

const loadingText = {
  contentdown: '上拉显示更多',
  contentrefresh: '正在加载...',
  contentnomore: '没有更多数据了'
}

// 初始化
onMounted(() => {
  fetchPoliticalExams()
})

/**
 * 获取政治试卷列表
 * 调用后端 /exam/list/political 接口
 * 该接口会返回所有与政治相关的考试试卷
 */
const fetchPoliticalExams = async () => {
  loading.value = true
  try {
    // 调用后端接口: GET /exam/list/political
    // 此接口会返回政治科目(subject_id=3)或政治分类(category_id=3)的所有已发布试卷
    const res = await request({
      url: '/exam/list/political',
      method: 'GET'
    })
    
    if (res.code === 200) {
      examList.value = res.data || []
    } else {
      showErrorToast('获取政治试卷列表失败')
    }
  } catch (error) {
    console.error('获取政治试卷列表错误:', error)
    showErrorToast('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 导航到试卷详情
const navigateToExamDetail = (examId) => {
  uni.navigateTo({
    url: `/pages/question-bank/exam-detail?examId=${examId}`
  })
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'available': '可用',
    'draft': '草稿',
    'archived': '已归档'
  }
  return statusMap[status] || '未知'
}

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    'available': 'status-available',
    'draft': 'status-draft',
    'archived': 'status-archived'
  }
  return classMap[status] || ''
}

// 显示错误提示
const showErrorToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none',
    duration: 2000
  })
}
</script>
